<template>
  <div class="my_progress">
    <div class="my_line">
      <div class="content" :style="progress | getStyle(delayed)"></div>
    </div>
    <div style="margin-left: 10px;">
      <i v-if="progress == 100" class="el-icon-circle-check" style="color: rgb(82, 196, 26);"></i>
      <span v-else>{{progress}}%</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    progress: Number,
    delayed: Boolean
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    format(percentage) {
      return "";
    }
  },
  filters: {
    getStyle(progress, delayed) {
      let style = "";

      if (progress == 100) {
        style = "background: rgb(82, 196, 26);";
      } else if (delayed) {
        style = "background: rgb(245, 34, 45);";
      } else {
        style = "background: rgb(250, 173, 20);";
      }

      style += "width: " + progress + "%;";
      return style;
    }
  },
  components: {}
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>